import { useState, useImperativeHandle, forwardRef } from "react"

// 使用 forwardRef 包装组件，这样可以正确接收 ref
const AboutChildX = forwardRef((props, ref) => {
    const [name, setName] = useState('张安')

    const changeName = () => {
        setName('张三-000')
    }
    // 这个也可以使用依赖数组,这样为了节省性能
    useImperativeHandle(ref, () => ({
        changeName
    }))

    return (
        <div className="aboutChildX">
            <h3>
                从父组件调用子组件的函数
            </h3>
            {name}
        </div>
    )
})

export default AboutChildX